<template>
    <div style="margin-top: 10px;">


        <div class="comment">

            <div class="comment-item">
                <div class="cover">
                    <img :src="cover" v-if="cover">
                    <img v-else src="../assets/pp.jpg">
                </div>
                <div class="user-info">
                    <div class="username"> 用户名:{{ username }}</div>
                    <div class="time">时间:{{ time }}</div>
                    <div class="content2">评论:{{ content }}</div>

                </div>

                <div class="reply">
                    <el-button type="text" @click="reply1(props)">回复</el-button>
                    <el-button type="text" @click="delete1(props)">删除</el-button>
                </div>
            </div>
            <el-collapse v-model="showReplies">
                <el-collapse-item title="回复内容">
                    <div v-for="item in ReplyList" :key="item.id">
                        <Reply :id="item.id" :cover="item.cover" :content="item.content" :blogId="item.blogId"
                               :parentId="item.parentId"
                               :time="item.time" :username="item.username" :userId="item.userId"
                               :parentName="item.parentName"></Reply>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <el-dialog v-model="dialogVisible" title="Comment" width="25%" draggable>
            <el-input type="textarea" placeholder="请输入评论" rows="3" v-model="cm"></el-input>
            <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitComment(props)">
          确定
        </el-button>
      </span>
            </template>
        </el-dialog>

    </div>
</template>

<script setup>
    //v-model="entity.content"
    import {ref} from 'vue';
    import axios from 'axios';

    const showReplies = ref(false); // 用于控制折叠面板的显示与隐藏
    const dialogVisible = ref(false);
    const currentTime = new Date();
    const ReplyList = ref([]); // 存储回复内容的数组
    const cm = ref("");
    const commentData = ref({
        blogId: "",
        userId: "",
        username: "",
        time: "",
        parentId: "",
        content: "",
        cover: "",
        parentName: "",
        writer: "",
    })
    const props = defineProps({
        blogId: {
            type: String,
        },
        cover: {
            type: String,
        },
        content: {
            type: String,
        },
        parentId: {
            type: String,
        },
        time: {
            type: String
        },
        username: {
            type: String
        },
        userId: {
            type: String
        },
        id: {
            type: String
        },
    })
    const jwtToken = localStorage.getItem('jwtToken');
    if (jwtToken) {
        // 解码JWT令牌（假设它是一个包含用户名的 JSON）
        const tokenData = JSON.parse(decodeURIComponent(escape(atob(jwtToken.split('.')[1]))));
        commentData.username = tokenData.username;
        commentData.cover = tokenData.cover;
        commentData.userId = tokenData.id;
    }

    // 创建一个Axios实例，可以在该实例中设置默认请求头
    const axiosInstance = axios.create({
        headers: {
            'Token': jwtToken // 将 JWT 令牌放入请求头的 token 字段
        }
    });
    axiosInstance.get(`http://localhost:8080/showReply/${props.blogId}/${props.id}`)
        .then(response => {
            const responseData = response.data;
            ReplyList.value = responseData.data
        })
        .catch(error => {
            console.error('请求失败:', error);
        });
    //上传评论
    const submitComment = (props) => {
        console.log(cm.value, props.id, 666666)
        dialogVisible.value = false;
        commentData.content = cm.value;
        commentData.blogId = props.blogId;

        commentData.parentName = props.username;
        const options = {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        };
        const formattedTime = currentTime.toLocaleString(undefined, options);
        commentData.time = formattedTime;
        commentData.parentId = props.id;
        axiosInstance.post('http://localhost:8080/insertComment', commentData)
            .then(response => {
                location.reload();
                alert("回复成功");
            })
            .catch(error => {
                console.error('请求失败:', error);
            });
    }
    //回复评论
    const reply1 = (props) => {
        showReplies.value = true;
        dialogVisible.value = true;

    }
    //查询作者
    axiosInstance.get(`http://localhost:8080/showdata/${props.blogId}`)
        .then(response => {
            const responseData = response.data;
            commentData.writer = responseData.data.writer;
        })
        .catch(error => {
            console.error('请求失败:', error);
        });
    //删除
    const delete1 = (props) => {
        console.log(commentData.username, props.username, commentData.writer, 666666666666);
        // 检查是否具有删除权限
        if (commentData.username === props.username || commentData.username === commentData.writer) {
            axiosInstance.delete(`http://localhost:8080/deleteComment/${props.id}`)
                .then(response => {
                    // 处理删除成功的逻辑
                    alert("删除成功");
                    location.reload(); // 刷新页面或执行其他操作
                })
                .catch(error => {
                    // 处理删除失败的逻辑
                });
        } else {
            alert("你没有权限删除此评论");
        }
    }
</script>

<style lang="scss">
    .comment {
        border: 0;

        .top {
            border: none; // 去掉边框
            box-shadow: none; // 去掉阴影，如果有的话
            background: transparent; // 设置背景为透明
            font-size: 24px; // 设置字体大小为0
            height: 14px; // 设置高度为0
            padding: 0; // 设置内边距为0
            text-align: left;
            line-height: 0; // 设置行高为0
            border-bottom: 1px solid #5e5b5b;
        }

        .comment-item {
            display: flex;
            align-items: center; // 垂直居中

            .cover {
                width: 60px;
                height: 60px;
                background: #ddd;
                display: flex;
                align-items: center;
                overflow: hidden;
                border-radius: 100px;
            }

            img {
                width: 100%;
                border-radius: 100px;
            }

            .user-info {
                color: #363535;
                flex: 1;
                margin-left: 10px;
                display: flex;
                flex-direction: column; // 垂直排列

                .username {
                    font-size: 12px;
                    font-weight: 400;
                }

                .time {
                    font-size: 12px;
                    font-weight: 400;
                }

                .content2 {
                    font-size: 15px;
                    font-weight: 400;
                }
            }

            .reply {
                text-align: left;
                font-size: 3px;
                display: flex;

            }
        }

    }
</style>